* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
main {
    display: flex;/*设置弹性容器，更好布局*/
    background-color: #2c3a47;
    align-items: center;/*设置弹性容器的子元素垂直居中*/
    justify-items: center;/*设置弹性容器的子元素水平居中*/
    margin: 0 auto;
    width: 1000px;
    height: 800px;
    animation: animate1 10s linear infinite;/*动画持续时间为10秒，动画效果为线性，无限循环*/
}
@keyframes animate1 {
    0% {
        filter: hue-rotate(0deg);/*旋转角度为0度*/
    }
    100% {
        filter: hue-rotate(360deg);/*动画结束时旋转角度为360度*/
    }
}
main>.circle {
    margin: 300px auto;
    position: relative;
    height: 120px;
    width: 120px;
}
main>.circle>span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 100%;
    transform: rotate(calc(var(--i)*18deg));/*设置旋转角度*/
}
main>.circle>span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50pc;
    background-color: aqua;
    box-shadow: 0 0 10px aqua,0 0 20px aqua,0 0 30px aqua,0 0 40px aqua,0 0 50px aqua,0 0 60px aqua,0 0 80px aqua,0 0 100px aqua;/*设置阴影,营造出发光效果*/
    animation: animate 2s linear infinite;
    animation-delay: calc(0.1s*var(--i));
}
@keyframes animate {
    0% {
        transform: scale(1);
    }
    80% ,
    100% {
        transform: scale(0);
    }
}
.loading {
    color: #fff;
    font-size: 20px;
    position: relative;
    top: 70px;
    right: 440px;

}

